import styled from '@emotion/styled'
import { Divider, List, Popover, Typography } from 'antd'
import React from 'react'
import { ButtonNoPadding } from 'components/lib'
import { useProjects } from 'utils/use-projects'

export const ProjectPopover = (props: { projectButton: JSX.Element }) => {
  const { data: projects, isLoading } = useProjects()
  const pinnedProjects = projects?.filter(project => project.pin)
  const content = (
    <Container>
      <Typography.Text type={'secondary'}>收藏项目</Typography.Text>
      <List>
        {pinnedProjects?.map(project => (
          <List.Item key={project.id}>
            <List.Item.Meta title={project.name} />
          </List.Item>
        ))}
      </List>
      <Divider />
      {props.projectButton}
    </Container>
  )
  return (
    <Popover placement={'bottom'} content={content}>
      <span>项目</span>
    </Popover>
  )
}

const Container = styled.div`
  min-width: 20rem;
`
